<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- PageTools是之前封装的公共组件，显示页面顶部的内容，有左右两个插槽 -->
      <PageTools>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addPermission(1,'0')">添加权限</el-button>
        </template>
      </PageTools>
      <!-- 表格 -->
      <!-- 关于el-table的树形结构 -->
      <!--
				el-table  组件支持树形结构的显示。
				1、当row中包含children字段时，被称为树形数据。
				2、渲染树形结构的时候，el-table标签上必须写一个row-key属性，作为唯一字段（有id用id）
			-->
      <el-table border="" :data="PermissionList" row-key="id">
        <el-table-column align="center" label="名称" prop="name" />
        <el-table-column align="center" label="标识" prop="code" />
        <el-table-column align="center" label="描述" prop="description" />
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <!--
							row数据中，type代表级别，1是1级树，2是二级树。
							此处表示，只有type为1的时候，才显示添加功能，二级一些不能添加
						-->
            <el-button v-if="row.type ===1" type="text" @click="addPermission(2,row.id)">添加</el-button>
            <el-button type="text" @click="editPermission(row.id)">编辑</el-button>
            <el-button type="text" @click="deletePermission(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加/编辑权限的弹层 -->
      <PermissionDialog ref="PermissionDialog" :is-permission-show.sync="isPermissionShow" :form-data="formData" @updateFormdata="updateFormdata" />
    </div>
  </div>
</template>

<script>
import { getPermissionListAPI, getPermissionListByIdAPI, deletePermissionAPI } from '@/api/index'
import { tranListToTreeData } from '@/utils/index'// 引入递归函数
import PermissionDialog from './components/add-permission.vue'
export default {
	name: 'PermissionList',
	components: {
		PermissionDialog
	},
	data() {
		return {
			PermissionList: [], // 声明一个数组，保存所有的权限点
			isPermissionShow: false, // 声明一个变量，控制添加/编辑弹出层的显示和隐藏
			formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      }
		}
	},
	created() {
		this.getPermissionList()
	},
	methods: {
		// 页面加载，获取页面所有权限点《《《《《————————————————————————————————————
		async getPermissionList() {
			const res = tranListToTreeData(await getPermissionListAPI(), '0')
			this.PermissionList = res
		},
		// 点击添加按钮，添加权限《《《《《————————————————————————————————————
		async	addPermission(type, pid) {
			// type：访问权的type=1.操作权的type=2
			// pid：表示当前数据的父节点的表示
			// 记录下当前的添加的类型和父标识
			this.formData.type = type
			this.formData.pid = pid
			this.isPermissionShow = true

		},
		// 点击编辑按钮，编辑权限《《《《《————————————————————————————————————
		async editPermission(id) {
			this.formData = await	getPermissionListByIdAPI(id)
			this.isPermissionShow = true
		},
		// 点击删除按钮，删除对应的权限点《《《《《————————————————————————————————————
		async deletePermission(row) {
			try {
				await this.$confirm('确定要删除该权限吗？')
				await deletePermissionAPI(row.id)
				this.getPermissionList()
				this.$message.success('权限删除成功!')
			} catch (err) {
				this.$message.warning('删除权限失败，请重试!')
			}
		},
		updateFormdata(res) {
			this.formData = res
		}
	}
}
</script>

<style lang="scss" scoped></style>